<template>
  <div class="top">
    <div class="top-tag" ref="scrollCon" @mousewheel="handlescroll" :style="{left: tagBodyLeft + 'px'}">
      <div class="tags" ref="scrollBody">
        <ul>
          <li><Icon type="close"></Icon>会员列表</li>
          <li class="active"><Icon type="close-round"></Icon>订单列表</li>
        </ul>
      </div>
    </div>
    <div class="top-bar">
      <div class="close">
        <Dropdown placement="bottom-end">
            <Icon type="navicon" size="26"></Icon>
            <DropdownMenu slot="list">
                <DropdownItem>关闭所有</DropdownItem>
                <DropdownItem>关闭其他</DropdownItem>
            </DropdownMenu>
        </Dropdown>
      </div>
      <div class="message">
        <Tooltip content="有3条未读消息">
          <Badge dot>
            <Icon type="ios-bell-outline" size="26"></Icon>
          </Badge>
        </Tooltip>
      </div>
      <Poptip trigger="click" placement="bottom-end" width="100">
        <div class="user">
          <div class="avatar">
            <img src="https://modao.cc/uploads3/avatars/60/607851/forum_0.jpeg" alt="">
            <Icon type="arrow-down-b"></Icon>
          </div>
        </div>
        <div slot="title" class="user-title">Admin</div>
        <div slot="content" class="user-content">
          <DropdownMenu>
            <DropdownItem><Icon type="ios-gear"></Icon>我的账户</DropdownItem>
            <DropdownItem divided><Icon type="ios-redo"></Icon>退出登录</DropdownItem>
          </DropdownMenu>
        </div>
      </Poptip>
    </div>
  </div>
</template>

<script>
export default {
  name: "topNav",
  components: {},
  data() {
    return {
      tagBodyLeft: 0
    };
  },
  methods: {
    handlescroll(e) {
      let left = 0;
      let scrollCon = this.$refs.scrollCon.offsetWidth - 200;
      let scrollBody = this.$refs.scrollBody.offsetWidth;
      if (e.wheelDelta > 0) {
        if (this.tagBodyLeft <= 0) {
          this.tagBodyLeft = 0;
        }
      } else {
        let max = scrollBody - scrollCon - 200;
        if (this.tagBodyLeft >= -max) {
          this.tagBodyLeft = -max;
        }
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top {
  height: 50px;
  line-height: 50px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  margin-left: 201px;
  padding: 0 10px;
}
.top-tag {
  margin-left: 200px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  right: 160px;
  transition: left 0.3s ease;
}
.tags {
  display: inline-block;
}
.top-tag li {
  display: inline-block;
  font-size: 13px;
  margin: 0 10px;
}
.top-tag li.active {
  height: 49px;
  border-bottom: 2px solid #2d8cf0;
}
.top-tag li i {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  font-size: 12px;
}
.top-tag li i:hover {
  width: 14px;
  height: 14px;
  color: #ffffff;
  border-radius: 50%;
  padding: 2px;
  background-color: #ed3f14;
}
.top-bar {
  float: right;
}
.message {
  float: left;
  width: 40px;
  text-align: center;
}
.close {
  float: left;
  width: 40px;
  text-align: center;
}
.close i {
  vertical-align: sub;
}
.user {
  float: left;
}
.avatar {
  margin: 0 10px;
}
.avatar img {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  margin: 8px 5px -8px 0;
}
.user-title {
  text-align: center;
  font-size: 14px;
  color: #7d8695;
  font-weight: bold;
}
.user-content li {
  text-align: left;
}
.user-content li i {
  font-size: 16px;
  padding-right: 10px;
}
</style>
